{extend name="template/base" /}
{block name='style'}
<style>
    .card{
        width:100px;float:left;border-radius: 10px;position:relative;
    }
    .card img{
        cursor:pointer;
    }

    .card{
        font-size:14px;
        text-align:center;
        color:#f00;
    }
    .uploadify-button{
           background-color: transparent;
           background-size:120px 120px;
           border:0px;
           border-radius:12px;
           background-position:-10px -10px;
   }
   .uploadify:hover .uploadify-button {
       background-color: transparent;
       background-position:-10px -10px;
   }
   .uploadify object{
       left:0px;
   }
   .uploadbtn{
       /*display:none;*/
   } 
   .appendimg{
        border-radius:10px;
        overflow: hidden;
   }
   .appendimg img{
        width:100px;
        height:100px;
   }
   .del{
        width:100px;
        height:25px;
        background: #ccc;
        opacity: 0.5;
        text-align:center;
        line-height:25px;
        font-size:20px;
        font-weight:bold;
        color:#f00;
        cursor:pointer;
        display: none;
   }
</style>
{/block}
{block name="content"}
<div class="page-container">
    <form class="form form-horizontal" id="form" method="post" action="{:\\think\\Request::instance()->baseUrl()}">
        <input type="hidden" name="id" value="{$vo.id ?? ''}">
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>名称：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" placeholder="名称" name="name" value="{$vo.name ?? ''}"  datatype="*" nullmsg="名称不能为空">
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">链接：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" placeholder="跳转地址，例如：http://www.baidu.com" name="url" value="{$vo.url ?? ''}" >
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>轮播图片：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <div class='card'>
                     {if condition="isset($vo.img) and !empty($vo.img)"}
                          <div class='appendimg' id='appendimg'>
                                 <img src='/uploads/carousel/{$vo.img}' layer-src='/uploads/carousel/{$vo.mdimg}'>  
                          </div>
                          <div class='del' data-index='{$vo.imgid}'>
                                 <i class='Hui-iconfont'>&#xe609;</i>
                          </div>
                          <div class='uploadbtn' style='display: none;'>
                             <input type = "file" name = "url" id = "file" />
                         </div>
                     {else/}
                         <div class='uploadbtn'>
                             <input type = "file" name = "url" id = "file" />
                         </div>
                     {/if}
                </div>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">显示顺序：</label>
            <div class="formControls col-xs-3 col-sm-3">
                <input type="text" class="input-text" placeholder="" name="sort" value="{$vo.sort ?? 10}" >
            </div>
            <div class="col-xs-3 col-sm-3" style="color:#bbb;">提示：数字越大越靠前</div>
            
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script>
    $(function () {


        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form").Validform({
            tiptype: 2,
            ajaxPost: true,
            showAllError: true,
            callback: function (ret){
                ajax_progress(ret);
            }
        });
        $('#file').uploadify({
                'buttonImage' : '__LIB__/uploadify/btn.png',
                'swf':'__LIB__/uploadify/uploadify.swf',       
                'uploader':"{:url('service/upload',['folder'=>'carousel'])}",  
                'width':100,
                'height':100,
                'fileTypeExts':'*.jpg;*.png',
                'multi':true,
                'removeCompleted':true,
                //把你的选择放在这里
                'onUploadSuccess' : function(file, data, response) {
                        //追加到前面
                        $('.card .uploadbtn').hide();
                        $('.card').append(data);
                    },
                'onFallback' : function() {
                            alert('此站需要浏览器支持flash,否则上传头像功能将不可用');
                            // layer_open('网站提示','<div style=\'font-size:20px;color:#f00\'><span>此站需要浏览器支持flash,否则上传头像功能将不可用</span></div>',{'w':'100%','h':'100%','type':1});
                          /*  layer.open({
                              title: '在线调试'
                              ,content: '可以填写任意的layer代码'
                            });*/
                            $('.card').remove();
                    }
            });
        $('body').delegate('.appendimg','mouseover',function(){
            $(this).next().show();
        });
        $('body').delegate('.card', 'mouseleave', function() {
            $('.del').hide();
        });
        $('body').delegate('.del','click',function(){
            obj=$(this);
            id=obj.data('index');
            $.post("{:url('service/del_upload_img')}",{'id':id},function(r){
              if(r==1){
                obj.prev().remove();
                obj.remove();
                $('#file-queue').html('');
                $('.card .uploadbtn').show();
              }else{
                layer.msg('删除失败，请稍后再试');
              } 
            });
        })
    })
    layer.photos({
      photos: '#appendimg'
      ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
</script>
{/block}
